<template>
  <div :class="{'h-toolbars':mode==='horizontal', 'v-toolbars':mode!=='horizontal'}">
    <template v-for="(action, actionIndex) in actions">
      <item :key="actionIndex" :placement="placement" :action="action" />
    </template>
  </div>
</template>

<script>
import ActionDispatcher from '../../actions/dispatcher'
import Item from './item'

export default {
  components: { Item },
  mixins: [ActionDispatcher],
  props: {
    mode: {
      type: String,
      required: false,
      default: 'horizontal' // horizontal 或 vertical
    },
    placement: {
      type: String,
      required: false,
      default: 'top'
    },
    actions: {
      type: Array,
      required: true,
      default: () => []
    }
  }
}
</script>

<style lang="scss">
// @import '../style/variable.scss';
.h-toolbars {
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center; /* 水平居中 */
  // align-content: flex-start;
  align-items: center; /* 垂直居中 */
  .tool-button {
    flex-grow: 0;
    width: 36px;
    height: 100%;
  }
  // 按钮间距
  .el-button {
    padding: 0 0px !important;
    border: none !important;
    margin: 0 1px !important;
  }
  // 按钮文字颜色
  .el-button--text {
    color: #000000 !important;
  }
  // 放大图标
  i,
  svg {
    font-size: 1.2em !important;
  }
}

.v-toolbars {
  height: 100%;
  display: flex;
  flex-direction: column;
  // justify-content: center; /* 水平居中 */
  // align-items: flex-start; /* 垂直居中 */
  .tool-button {
    flex-grow: 0;
    height: 24px;
    width: 30px;
  }
  // 按钮间距
  .el-button {
    padding: 0px 0px !important;
    border: none !important;
    margin: 1px 0 !important;
  }
  // 按钮文字颜色
  .el-button--text {
    color: #b5b5b5 !important;
  }
  // 放大图标
  i,
  svg {
    font-size: 1.2em !important;
  }
}
</style>
